
<html>
	<head>
		<title></title>
		<meta charset="utf-8"/>
		<meta name="viewport" content=""/>
		
		<!-- load CSS -->
		<!-- Custom -->
		<link rel="stylesheet" type="text/css" href="css/mainrestyle.css"/>
		<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

		<script src="blockly/blockly_compressed.js"></script>
		<script src="blockly/msg/js/en.js"></script>

		<script src="en.js"></script>
		<script src="html_generators.js"></script>
		<script src="html_blocks.js"></script>

		<!-- For JS-Blocks only -->
		<script src="blockly/blocks_compressed.js"></script>
		<script src="blockly/javascript_compressed.js"></script>
	</head>
	<body>
		<div id="container">
			<div id="leftcontainer" >
				<div id="blocklyArea"></div>
				
				<div id="toggleBox">
				<div id="modelArea">
					<label class="centerText"> Tools Panel</label> </br>
					</br>
					<div>	<input type="checkbox" id="websiteUpdateCheckbox" name="websiteCheckbox" checked>	<label for="websiteUpdateCheckbox">Render window automatic update</label>	<button type="button" id="websiteUpdateButton" disabled hasbeenclicked="false">Update</button> </div>
					</br>
					<div>	<label for="EraseLocalStorageButton">Erase LocalStorage:</label> <input type="button" value="Erase" id="EraseLocalStorageButton" style="max-width:100px" /> </div>
					</br>
					<div id="modeldiv"><span id="modelspan" >Local 3D model upload</span> </div>
					<label for="fileselect">Files to upload:</label>
					<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" accept=".gltf,.obj"/>
					<div id="filedrag" >or drop files here</div>
					<div id="submitbutton">
						<button type="submit">Upload Files</button>
					</div>

					<div id="messages">
						<p>Uploaded 3D model list:</p>
						<div>
							<ul id="modellist">
							</ul>
						</div>
					</div>
				</div>
				<button type="button" id="togglebutton" class="slide-toggle">▶</button>
				</div>
			</div>
			
			<div id="rightcontainer" >
				<div id="menubar">
					<div><span id="newProj">💾 New project</span> <input type="button" value="New" id="newButton" /></div>
					<div><span id="saveText">💾 Save blocks:</span> <input type="button" value="Save" id="saveButton" /></div>
					<div><span id="loadText">📂 Load blocks:</span> <input type="file" id="fileButton" style="max-width:200px" /></div>
					<div><span id="exportText">📄 Export webpage as HTML:</span> <input type="button" value="Export" id="exportButton" /></div>
					<script>
						if (typeof(Msg) == "object" && Msg.buttons) {  // Multi lang?
						document.getElementById("saveText").textContent   = Msg.buttons.save.desc;
						document.getElementById("saveButton").textContent = Msg.buttons.save.button;
						document.getElementById("loadText").textContent   = Msg.buttons.load.desc;
						document.getElementById("exportText").value       = Msg.buttons.export.desc;
						document.getElementById("exportButton").value     = Msg.buttons.export.button;
						}
					</script>
				</div>
				<div id="title">untitled web page</div>
				<script>//"blob:http://192.168.1.66:8080"   "about:blank"</script>
				<div id="websiteFrame" class="ui-widget-content"><iframe id="website" srcdoc="blob:http://localhost:8080"></iframe></div>
				<pre id="sourcecode">sum contnent</pre>
			</div>
		</div>

		<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
			<category name="html" expanded="true">
				<category name="baseframe" colour="#a55b5b">
					<block type="html">
						<statement name="content">
							<block type="head">
								<statement name="content">
									<block type="title">
										<statement name="content">
											<block type="plaintext">
												<field name="content"></field>
											</block>
										</statement>
									</block>
								</statement>
								<next>
									<block type="body"></block>
								</next>
							</block>
						</statement>
					</block>
					<block type="html"></block>
					<block type="body"></block>
					<block type="body_attributes"></block>
					<block type="head"></block>
					<block type="title">
						<statement name="content">
							<block type="plaintext">
								<field name="content"></field>
							</block>
						</statement>
					</block>
				</category>
				<category name="textstructure" colour="#5ba55b">
					<block type="plaintext">
						<field name="content"></field>
					</block>
					<block type="horizontalbreak"></block>
					<block type="linebreak"></block>
					<block type="paragraph"></block>
					<block type="headline">
						<field name="NAME">h1</field>
					</block>
					<block type="link">
						<field name="NAME">target</field>
					</block>
					<block type="image">
						<field name="IMAGE">URL</field>
						<field name="ALT">alternative text</field>
					</block>
					<block type="generictag">
						<field name="NAME">tag</field>
					</block>
				</category>
				<category name="markup" colour="#5ba55b">
					<block type="emphasise"></block>
					<block type="inserted"></block>
					<block type="strong"></block>
					<block type="deleted"></block>
					<block type="super"></block>
					<block type="sub"></block>
					<block type="code"></block>
					<block type="quote"></block>
					<block type="blockquote"></block>
					<block type="sample"></block>
					<block type="keyboard"></block>
					<block type="variable"></block>
					<block type="division"></block>
				</category>
				<category name="style" colour="#5b6da5">
					<block type="span">
						<value name="NAME">
							<block type="style"></block>
						</value>
					</block>
					<block type="style"></block>
					<block type="color">
						<field name="NAME">#ff0000</field>
					</block>
					<block type="bgcolour">
						<field name="NAME">#ff0000</field>
					</block>
					<block type="genericstyle">
						<field name="property">property</field>
						<field name="value">value</field>
					</block>
					<block type="span"></block>
					<block type="division"></block>
					<block type="generictag">
						<field name="NAME">tag</field>
					</block>
				</category>
				<category name="enumerations" colour="#a55ba5">
					<block type="unorderedlist"></block>
					<block type="orderedlist"></block>
					<block type="listelement"></block>
				</category>
				<category name="tables" colour="#5ba5a5">
					<block type="table">
						<statement name="content">
							<block type="tablerow">
								<statement name="content">
									<block type="tablecell">
										<next>
											<block type="tablecell"></block>
										</next>
									</block>
								</statement>
								<next>
									<block type="tablerow">
										<statement name="content">
											<block type="tablecell">
												<next>
													<block type="tablecell"></block>
												</next>
											</block>
										</statement>
									</block>
								</next>
							</block>
						</statement>
					</block>
					<block type="table"></block>
					<block type="tablerow"></block>
					<block type="tablecell"></block>
				</category>
				<category name="forms" colour="#80a55b">
					<block type="form"></block>
					<block type="input_text">
						<field name="default"></field>
					</block>
					<block type="button"></block>
					<block type="input">
						<field name="type">text</field>
						<field name="value"></field>
					</block>
				</category>
				<category name="scripts" colour="#a5a55b">
					<block type="script"></block>
					<block type="onclick"></block>
				</category>
			</category>
			<sep></sep>
			<category name="scripting">
				<category name="logic" colour="#5C81A6">
					<block type="controls_if"></block>
					<block type="logic_compare">
						<field name="OP">EQ</field>
					</block>
					<block type="logic_operation">
						<field name="OP">AND</field>
					</block>
					<block type="logic_negate"></block>
					<block type="logic_boolean">
						<field name="BOOL">TRUE</field>
					</block>
					<block type="logic_null"></block>
					<block type="logic_ternary"></block>
				</category>
				<category name="loops" colour="#5CA65C">
					<block type="controls_repeat_ext">
						<value name="TIMES">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
					</block>
					<block type="controls_whileUntil">
						<field name="MODE">WHILE</field>
					</block>
					<block type="controls_for">
						<field name="VAR" id=")[(PctVvu3c`*IACnwmm">i</field>
						<value name="FROM">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
						<value name="TO">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
						<value name="BY">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
					</block>
					<block type="controls_forEach">
						<field name="VAR" id="~a;YXk@k`X$Eb9]Z6{Me">j</field>
					</block>
					<block type="controls_flow_statements">
						<field name="FLOW">BREAK</field>
					</block>
				</category>
				<category name="math" colour="#5C68A6">
					<block type="math_round">
						<field name="OP">ROUND</field>
						<value name="NUM">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
					</block>
					<block type="math_number">
						<field name="NUM">0</field>
					</block>
					<block type="math_single">
						<field name="OP">ROOT</field>
						<value name="NUM">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
					</block>
					<block type="math_trig">
						<field name="OP">SIN</field>
						<value name="NUM">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
					</block>
					<block type="math_constant">
						<field name="CONSTANT">PI</field>
					</block>
					<block type="math_number_property">
						<mutation divisor_input="false"></mutation>
						<field name="PROPERTY">EVEN</field>
						<value name="NUMBER_TO_CHECK">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
					</block>
					<block type="math_arithmetic">
						<field name="OP">ADD</field>
						<value name="A">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
						<value name="B">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
					</block>
					<block type="math_on_list">
						<mutation op="SUM"></mutation>
						<field name="OP">SUM</field>
					</block>
					<block type="math_modulo">
						<value name="DIVIDEND">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
						<value name="DIVISOR">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
					</block>
					<block type="math_constrain">
						<value name="VALUE">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
						<value name="LOW">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
						<value name="HIGH">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
					</block>
					<block type="math_random_int">
						<value name="FROM">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
						<value name="TO">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
					</block>
					<block type="math_random_float"></block>
				</category>
				<category name="text" colour="#5CA68D">
					<block type="text_charAt">
						<mutation at="true"></mutation>
						<field name="WHERE">FROM_START</field>
						<value name="VALUE">
							<block type="variables_get">
								<field name="VAR" id="3lD0;=:EX{.QS(1_E}e_">item</field>
							</block>
						</value>
					</block>
					<block type="text">
						<field name="TEXT"></field>
					</block>
					<block type="text_append">
						<field name="VAR" id="3lD0;=:EX{.QS(1_E}e_">item</field>
						<value name="TEXT">
							<shadow type="text">
								<field name="TEXT"></field>
							</shadow>
						</value>
					</block>
					<block type="text_length">
						<value name="VALUE">
							<shadow type="text">
								<field name="TEXT"></field>
							</shadow>
						</value>
					</block>
					<block type="text_isEmpty">
						<value name="VALUE">
							<shadow type="text">
								<field name="TEXT"></field>
							</shadow>
						</value>
					</block>
					<block type="text_indexOf">
						<field name="END">FIRST</field>
						<value name="VALUE">
							<block type="variables_get">
								<field name="VAR" id="3lD0;=:EX{.QS(1_E}e_">item</field>
							</block>
						</value>
						<value name="FIND">
							<shadow type="text">
								<field name="TEXT"></field>
							</shadow>
						</value>
					</block>
					<block type="text_join">
						<mutation items="2"></mutation>
					</block>
					<block type="text_getSubstring">
						<mutation at1="true" at2="true"></mutation>
						<field name="WHERE1">FROM_START</field>
						<field name="WHERE2">FROM_START</field>
						<value name="STRING">
							<block type="variables_get">
								<field name="VAR" id="3lD0;=:EX{.QS(1_E}e_">item</field>
							</block>
						</value>
					</block>
					<block type="text_changeCase">
						<field name="CASE">UPPERCASE</field>
						<value name="TEXT">
							<shadow type="text">
								<field name="TEXT"></field>
							</shadow>
						</value>
					</block>
					<block type="text_trim">
						<field name="MODE">BOTH</field>
						<value name="TEXT">
							<shadow type="text">
								<field name="TEXT"></field>
							</shadow>
						</value>
					</block>
					<block type="text_print">
						<value name="TEXT">
							<shadow type="text">
								<field name="TEXT"></field>
							</shadow>
						</value>
					</block>
					<block type="text_prompt_ext">
						<mutation type="TEXT"></mutation>
						<field name="TYPE">TEXT</field>
						<value name="TEXT">
							<shadow type="text">
								<field name="TEXT"></field>
							</shadow>
						</value>
					</block>
				</category>
				<category name="lists" colour="#745CA6">
					<block type="lists_indexOf">
						<field name="END">FIRST</field>
						<value name="VALUE">
							<block type="variables_get">
								<field name="VAR" id="$nGj}F5dt?Fu8z!2-*~F">item</field>
							</block>
						</value>
					</block>
					<block type="lists_create_with">
						<mutation items="0"></mutation>
					</block>
					<block type="lists_repeat">
						<value name="NUM">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
					</block>
					<block type="lists_length"></block>
					<block type="lists_isEmpty"></block>
					<block type="lists_create_with">
						<mutation items="3"></mutation>
					</block>
					<block type="lists_getIndex">
						<mutation statement="false" at="true"></mutation>
						<field name="MODE">GET</field>
						<field name="WHERE">FROM_START</field>
						<value name="VALUE">
							<block type="variables_get">
								<field name="VAR" id="$nGj}F5dt?Fu8z!2-*~F">item</field>
							</block>
						</value>
					</block>
					<block type="lists_setIndex">
						<mutation at="true"></mutation>
						<field name="MODE">SET</field>
						<field name="WHERE">FROM_START</field>
						<value name="LIST">
							<block type="variables_get">
								<field name="VAR" id="$nGj}F5dt?Fu8z!2-*~F">item</field>
							</block>
						</value>
					</block>
					<block type="lists_getSublist">
						<mutation at1="true" at2="true"></mutation>
						<field name="WHERE1">FROM_START</field>
						<field name="WHERE2">FROM_START</field>
						<value name="LIST">
							<block type="variables_get">
								<field name="VAR" id="$nGj}F5dt?Fu8z!2-*~F">item</field>
							</block>
						</value>
					</block>
					<block type="lists_split">
						<mutation mode="SPLIT"></mutation>
						<field name="MODE">SPLIT</field>
						<value name="DELIM">
							<shadow type="text">
								<field name="TEXT"></field>
							</shadow>
						</value>
					</block>
					<block type="lists_sort">
						<field name="TYPE">NUMERIC</field>
						<field name="DIRECTION">1</field>
					</block>
				</category>
				<category name="colour" colour="#A6745C">
					<block type="colour_picker">
						<field name="COLOUR">#ff0000</field>
					</block>
					<block type="colour_random"></block>
					<block type="colour_rgb">
						<value name="RED">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
						<value name="GREEN">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
						<value name="BLUE">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
					</block>
					<block type="colour_blend">
						<value name="COLOUR1">
							<shadow type="colour_picker">
								<field name="COLOUR">#ff0000</field>
							</shadow>
						</value>
						<value name="COLOUR2">
							<shadow type="colour_picker">
								<field name="COLOUR">#ff0000</field>
							</shadow>
						</value>
						<value name="RATIO">
							<shadow type="math_number">
								<field name="NUM">0</field>
							</shadow>
						</value>
					</block>
				</category>
				<category name="variables" colour="#A65C81" custom="VARIABLE"></category>
				<category name="functions" colour="#9A5CA6" custom="PROCEDURE"></category>
			</category>
			<sep></sep>
			<category name="AFrame">
				<category name="Import" colour="#5C81A6">
					<block type= "import_script"></block>
					<block type="import_aframe"></block>
					<block type="import_inspector"></block>
					<block type="import_event"></block>
					<block type="import_extra"></block>
					<block type="inspector_code_load"></block>
				</category>
				<category name="Scene" color="#5C81A6">
					<block type="scene_create"></block>
					<block type="camera_3d"></block>
					<block type="light_3d"></block>
					<block type="camera_3d_child"></block>
					<block type="camera_3d_option_child"></block>
					<block type="a-sky"></block>
					<block type="a_sky_explor"></block>
					<block type="primitive"></block>
					<block type="primitive_child"></block>
					<block type=primitive_option_child></block>
					<block type=Options_Primitive></block>
					<block type="import_model_gltf"></block>
					<block type="import_model_obj"></block>
				</category>

				<category name="Scene Options" colour="#5C81A6"> 
					<block type="primitive"></block>
					<block type="color3d"></block>
					<block type="color3dHEX"></block>
					<block type="imgsrc"></block>
					<!--<block type="posrotscale_3d"></block>-->
					<block type="posrotscale_3d_"></block>
					<block type="position3d"></block>
					<block type="rotation3d"></block>
					<block type="scale3d"></block>


					<block type="dimension_3d"></block>
					<block type="width3d"></block>   
					<block type="height3d"></block> 
					<block type="depth3d"></block>
					<block type="radius3d"></block>
					<block type="segments-radial3d"></block>
					<block type="side3d"></block>
				</category>

				<category name="3D Camera Option" color="#5C81A6">

					<category name="Options" color="#5C81A6">
						<block type="position3d"></block>
						<block type="rotation3d"></block>
						<block type="wasd_fps"></block>
						<block type="camera_cursor"></block>
						<block type="camera_cursor_color"></block>
						<block type="camera_cursor_scale"></block>
						<block type="camera_cursor_opacity"></block>
					</category>


					<category name="Child" color="#5C81A6">
						<block type="cursor3d"></block>
						<block type="cursor3dHEX"></block>
					</category>

				</category>

				<category name="Light Option" color="#5C81A6">
					<block type="position3d"></block>
					<block type="rotation3d"></block>
					<block type="color3d"></block>
					<block type="color3dHEX"></block>
					<block type="light3d_type"></block>
					<block type="light3d_intenity"></block>
				</category>



				<category name="Animation" colour="#5C81A6">

					<category name="Exemple" colour="#5C81A6">
						<block type="animation_options" id="Q9n5t=^dhb(WG7Bz~(:?" x="-137" y="263"><statement name="ANIMATION_OPTION"><block type="animation_property_property" id="DC]~PcXf/.|?eJT@ti*m"><field name="property">rotation</field><next><block type="animation_property_to" id="r4#Jaey~sUgKmyW]qTz;"><field name="TO_X">0</field><field name="TO_Y">360</field><field name="TO_Z">0</field><next><block type="animation_property_loop" id="xg*,WfFs*7r.Vy/+*@]B"><field name="LOOP">true</field><next><block type="animation_property_liner" id="jo:4oPk:/7/1M-[)LGz#"><field name="EAS">linear</field><next><block type="animation_property_dur" id="c60V};6U}N{Ne%ZNd2?K"><field name="DUR">3000</field></block></next></block></next></block></next></block></next></block></statement></block>
					</category>

					<block type="animation_options"></block>
					<block type="animation_property"></block>
					<block type="animation_property_property"></block>
					<block type="animation_property_from"></block>
					<block type="animation_property_to"></block>
					<block type="animation_property_loop"></block>
					<block type="animation_property_dir"></block>
					<block type="animation_property_dur"></block>
					<block type="animation_property_liner"></block>
					<block type="animation_property_easeIn"></block>
					<block type="animation_property_easeOut"></block>
					<block type="animation_property_easeInOut"></block>

				</category>

				<category name="Texture" colour="#5C81A6"> 
					<block type="Texture3D"></block>
					<block type="Texture3d_link"></block>
					<block type="Texture3D_repeat"></block>
					<block type="Texture_NormalMap3D"></block>
					<block type="Texture3D_NormalMap_repeat"></block>
					<block type="Texture3D_normal_scale"></block>
					<block type="texture3d_roughness"></block>
					<block type="texture3d_opacity"></block>
				</category>


				<category name="Assets" colour="#5C81A6"> 
					<block type="assets_list"></block>
					<block type="asset_item"></block>
					<block type="asset_img"></block>
					<block type="asset_video"></block>
				</category>

				<category name="Entity" colour="#5C81A6"> 
					<block type="a-entity"></block>
					<block type="gltf_entity"></block>
					<block type="obj_entity"></block>
					<block type="extra_entity"></block>
				</category>

				<category name="Entity Options" colour="#5C81A6">

				</category> 

				<category name="Video" colour="#5C81A6">
					<block type="video"></block>
					<block type="videosphere360"></block>
					<!--<block type="video_controll"></block>-->
					
				</category>

				<category name="Event" colour="#5C81A6"> 

					<category name="Example" colour="#5C81A6">

						<block type="event_set_name" id="bNlRr90*1I^ev}.uyFWL" x="-58" y="763"><field name="EVENTNAME">enter</field><statement name="NAME"><block type="event_type" id=")8h9iD+Gn;DgG(WPKK,?"><field name="EVENT_TYPE">mouseenter</field><next><block type="event_material" id="veFTs[`jxz:=Eo8W]o+D"><field name="option">color</field><value name="MATERIAL_INPUT"><block type="input_color" id="`+w1G7V#Mz[Vvbd~^9I@"><field name="COLOR_INPUT">#000099</field></block></value></block></next></block></statement></block><block type="event_set_name" id="SM2V-=)*ZihbY+J7W9J?" x="-50" y="988"><field name="EVENTNAME">leave</field><statement name="NAME"><block type="event_type" id="9BW}N7Wx6T^7OyvRy3|}"><field name="EVENT_TYPE">mouseleave</field><next><block type="event_material" id="(T/,LWILhy^B3m^mwthP"><field name="option">color</field><value name="MATERIAL_INPUT"><block type="input_color" id="1KDSaQonR-l-IAQMw4#I"><field name="COLOR_INPUT">#ff0000</field></block></value></block></next></block></statement></block><block type="event_set_name" id="~89Adb)emPON/sGv/`Nv" x="-62" y="1153"><field name="EVENTNAME">click</field><statement name="NAME"><block type="event_type" id="_6u990c3A4;l3.{_1n@@"><field name="EVENT_TYPE">click</field><next><block type="event_material" id="b:!{G[`P{gfMDs_0[4u+"><field name="option">color</field><value name="MATERIAL_INPUT"><block type="input_color" id="-+SXmId~IQA4B+v:EO2{"><field name="COLOR_INPUT">#ffff00</field></block></value></block></next></block></statement></block>

					</category>  

					<block type="event_set_name"></block>
					<block type="event_type"></block>
					<block type="event_target"></block>
					<block type="event_position"></block>
					<block type="event_material"></block>
					<block type="event_visible"></block>
					<block type="entity_cursor"></block>
					<block type="entity_cursor_vr"></block>
				</category>

				<category name="Input" colour="#5C81A6"> 
					<block type="input_text"></block>
					<block type="input_number"></block>
					<block type="input_color"></block>

				</category>

			</category>
		</xml>

		<script>
			if (typeof(Msg) == "object" && Msg.categories) {
			for (category in Msg.categories) {
			elements = document.getElementsByName(category);
			if (elements.length == 0) {
			continue;
			}
			elements[0].setAttribute("name", Msg.categories[category]);
			}
			}
		</script>

		<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlocks" style="display: none">
			<block type="html" id="9oFDR`IIn6rS=HtBc1=;" x="-111" y="95"><statement name="content"><block type="head" id="GcN`f+0y~dua46CQmnr|"><statement name="content"><block type="title" id="rB[~}$}00N3;aP6]xnDB"><statement name="content"><block type="plaintext" id="CjhokkH)~`2F##tpTkVK"><field name="content">Blockly Aframe HTML example</field></block></statement><next><block type="import_aframe" id="+*.`^K2f%Qcbji,@6N=Q"><field name="NAME">https://aframe.io/releases/1.0.4/aframe.min.js</field></block></next></block></statement><next><block type="body_attributes" id="PScP7X][kjt|f!8/L%#="><value name="NAME"><block type="style" id="m0}^Fb+}Ev,7[q@ztf#N"><statement name="NAME"><block type="genericstyle" id="6@F@,+j$;T5u{n4?uEUr"><field name="property">font-family</field><field name="value">sans-serif</field></block></statement></block></value><statement name="content"><block type="headline" id="d:z#:mNMg1h1m!i2PHcr"><field name="NAME">h1</field><statement name="content"><block type="plaintext" id=",n5f}8p,uZ`8~05HU]WI"><field name="content">Sito di prova</field></block></statement><next><block type="scene_create" id="q)vW=T-o8-nSc.*cMN=N"><statement name="NAME"><block type="primitive" id="LK`*4Z(nEn24#Lg]$J?d"><field name="DROPDOWN">box</field><field name="IDNAME">primitive_name</field><field name="VISIBLE">TRUE</field><statement name="NAME"><block type="color3d" id="Ke@0/Ak~YYef?.*uKWz4"><field name="COLOR3D">#ff0000</field><next><block type="position3d" id="X8do_P#D{{nQlNNd)X@I"><field name="Pos_X">0</field><field name="Pos_Y">2</field><field name="Pos_Z">-2</field></block></next></block></statement></block></statement><next><block type="paragraph" id="*Rz:ki|!g2mKn^EYW(:J"><statement name="content"><block type="plaintext" id="EIz9Kw[X.+M3UlJ~5u(q"><field name="content">aa</field></block></statement></block></next></block></next></block></statement></block></next></block></statement></block>
		</xml>


		<xml xmlns="https://developers.google.com/blockly/xml" id="workspaceBlank" style="display: none">
		</xml>
		<script>
			var toolbox = document.getElementById("toolbox");
			var blocklyArea = document.getElementById('blocklyArea');

			var options = {
			toolbox : toolbox,
			collapse : true,
			//        comments : false,
			//        disable : false,
			maxBlocks : Infinity,
			trashcan : true,
			//        horizontalLayout : false,
			//        toolboxPosition : 'start',
			tooltips: true,
			css : true,
			media : 'https://blockly-demo.appspot.com/static/media/',
			rtl : false,
			scrollbars : true,
			sounds : true, // add button or modal for "La riproduzione automatica è consentita solo quando accettata dall’utente, l’utente ha interagito con il sito oppure il file multimediale ha il volume azzerato."
			oneBasedIndex : true
			};

			var workspace = Blockly.inject(blocklyArea, options);

			var xml_text = localStorage.getItem('blockly-html-code');
			if (xml_text) {
				var xml = Blockly.Xml.textToDom(xml_text);
				Blockly.Xml.domToWorkspace(xml, workspace);
			}
			else {
				/* === For backwards compability. Remove soon ===*/
				var xml_text = localStorage.getItem('code');
				if (xml_text) {
					var xml = Blockly.Xml.textToDom(xml_text);
					Blockly.Xml.domToWorkspace(xml, workspace);
					}
				/* === ^^^ === */
				else {
						if (localStorage.getItem("blank-flag") === null || localStorage.getItem("blank-flag")=="false") {
						var workspaceBlocks = document.getElementById("workspaceBlocks");
						Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);
						}
						else {
							var blankBlocks = document.getElementById("workspaceBlank");
							Blockly.Xml.domToWorkspace(blankBlocks, workspace);
							localStorage.setItem('blank-flag', 'false');
						}
				}
			}

			Blockly.svgResize(workspace);

			function myUpdateFunction(event) {
				var code = HtmlGenerator.workspaceToCode(workspace);
				document.getElementById('sourcecode').innerText = code;
				//document.getElementById('website').src = "data:text/html;charset=utf-8," + encodeURIComponent(code);
				if(document.getElementById('websiteUpdateCheckbox').checked || document.getElementById('websiteUpdateButton').getAttribute("hasbeenclicked")=="true") {
					document.getElementById('website').srcdoc = code;
				}
				// Save Blocks
				var xml = Blockly.Xml.workspaceToDom(workspace);
				var xml_text = Blockly.Xml.domToText(xml);
				localStorage.setItem('blockly-html-code', xml_text);
			}
			
			
			workspace.addChangeListener(myUpdateFunction);

			function saveWorkspaceToDownload() {
			var xml = Blockly.Xml.workspaceToDom(workspace);
			var xml_text = Blockly.Xml.domToText(xml);
			newWindow = window.open("data:application/octet-stream," + encodeURIComponent(xml_text), 'webseite.blockly.xml');
			}
			document.getElementById("saveButton").onclick = saveWorkspaceToDownload;

			function saveHtmlToDownload() {
			var code = HtmlGenerator.workspaceToCode(workspace);
			newWindow = window.open("data:application/octet-stream," + encodeURIComponent(code), 'webseite.html');
			}
			document.getElementById("exportButton").onclick = saveHtmlToDownload;


			function loadWorkspaceFromUpload(e) {
			var file = e.target.files[0];
			if (!file) {
			return;
			}
			var reader = new FileReader();
			reader.onload = function(e) {
			var xml_text = e.target.result;
			if (xml_text) {
			var xml = Blockly.Xml.textToDom(xml_text);
			Blockly.Xml.domToWorkspace(xml, workspace);
			}
			};
			reader.readAsText(file);
			}
			document.getElementById('fileButton').addEventListener('change', loadWorkspaceFromUpload, false);
			//
			function createNewBlankProject() {
			localStorage.clear();
			localStorage.setItem('blank-flag', 'true');
			window.location.reload(false); 
			}
			document.getElementById("newButton").onclick = createNewBlankProject;

			function clearLocalStorage() {
			localStorage.clear();
			window.location.reload(false); 
			}
			document.getElementById("EraseLocalStorageButton").onclick = clearLocalStorage;

		</script>
		<script src="js/geoDB.js"></script>
		<script src="js/model.js"></script>
		<script>
		
			$(document).ready(function(){
				var websiteSourceHeight = $('#websiteFrame').height() + $('#sourcecode').height() +15;
			
				$(".slide-toggle").click(function(){
					$("#modelArea").animate({width: "toggle"});
					if($("#modelArea").css("z-index")=="1"){ //Closing
						$("#modelArea").css("z-index","-1");
						$("#toggleBox").css("width","0%");
						document.getElementById("togglebutton").innerHTML = "◀"; //left-arrow
					}else{                                   // Opening
						$("#modelArea").css("z-index","1");
						$("#toggleBox").css("width","100%");
						document.getElementById("togglebutton").innerHTML = "▶"; //right-arrow
					}
				});
				
				$( function() {
					$( "#websiteFrame" ).resizable({
						
						resize: function(e, ui){
						$('#sourcecode').height(websiteSourceHeight-ui.size.height); 
					  }
					} );
				});
				
			/*
				$( function() {
				$( "#leftcontainer" ).resizable();
				} );
				
				$('#leftcontainer').resize(function(){
					var parentwidth = $("#container").width();
				    $('#rightcontainer').width(parentwidth-$("#leftcontainer").width()); 
					rightpercentage = Math.round(($("#rightcontainer").width() / parentwidth) * 100),
					leftpercentage = Math.round(($("#leftcontainer").width() / parentwidth) * 100);
					$('#container').css( "grid-template-columns", leftpercentage+" "+rightpercentage );
				});
			*/
			
				$('#websiteUpdateCheckbox').change(function() {
					if(this.checked) {
						document.getElementById("websiteUpdateButton").disabled = true;
						myUpdateFunction();
						//workspace.trigger( "onchange" );
					}
					else { document.getElementById("websiteUpdateButton").disabled = false; }
				});
				
				$('#websiteUpdateButton').click(function() {
						document.getElementById('websiteUpdateButton').setAttribute("hasbeenclicked", "true");
						myUpdateFunction();
						document.getElementById('websiteUpdateButton').setAttribute("hasbeenclicked", "false");
						//workspace.trigger( "onchange" );
				});
				
				
			});
			
			
		

		</script>
	</body>
</html>
